<template>
	<view class="my-order">
		<!-- 订单状态筛选 -->
		<view class="order-tabs">
			<view class="tab-list">
				<view class="tab-item" 
					v-for="tab in orderTabs" 
					:key="tab.type"
					:class="{active: activeTab === tab.type}"
					@click="switchTab(tab.type)">
					<text>{{tab.name}}</text>
					<text class="tab-badge" v-if="tab.count > 0">{{tab.count}}</text>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<scroll-view class="order-list" scroll-y>
			<view class="order-item" v-for="order in filteredOrders" :key="order.id">
				<!-- 订单头部 -->
				<view class="order-header">
					<text class="order-no">订单号：{{order.orderNo}}</text>
					<text class="order-status" :class="getStatusClass(order.status)">{{getStatusText(order.status)}}</text>
				</view>

				<!-- 商品信息 -->
				<view class="order-products">
					<view class="product-item" v-for="product in order.products" :key="product.id">
						<image class="product-image" :src="product.image" mode="aspectFill" @click="navigateToProductDetail(product.id)"></image>
						<view class="product-info">
							<text class="product-name">{{product.name}}</text>
							<text class="product-spec">{{product.spec}}</text>
							<view class="product-bottom">
								<text class="product-price">¥{{product.price}}</text>
								<text class="product-quantity">x{{product.quantity}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 订单底部 -->
				<view class="order-footer">
					<text class="order-time">{{order.createTime}}</text>
					<text class="order-total">合计：¥{{order.totalAmount}}</text>
				</view>

				<!-- 操作按钮 -->
				<view class="order-actions">
					<button class="action-btn secondary" v-if="order.status === 'pending'" @click="cancelOrder(order.id)">取消订单</button>
					<button class="action-btn primary" v-if="order.status === 'pending'" @click="payOrder(order.id)">立即支付</button>
					<button class="action-btn secondary" v-if="order.status === 'paid'" @click="confirmReceipt(order.id)">确认收货</button>
					<button class="action-btn primary" v-if="order.status === 'received'" @click="evaluateOrder(order.id)">评价</button>
					<button class="action-btn secondary" v-if="order.status === 'completed'" @click="reorder(order.id)">再次购买</button>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-order" v-if="filteredOrders.length === 0">
				<image class="empty-icon" src="/static/my/empty-order.png" mode="aspectFit"></image>
				<text class="empty-text">暂无订单</text>
				<button class="empty-btn" @click="navigateToOrder">去下单</button>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 订单状态标签
const orderTabs = ref([
	{ type: 'all', name: '全部', count: 5 },
	{ type: 'pending', name: '待付款', count: 1 },
	{ type: 'paid', name: '待使用', count: 2 },
	{ type: 'received', name: '待评价', count: 1 },
	{ type: 'completed', name: '已完成', count: 1 }
])

const activeTab = ref('all')

// 订单数据
const orders = ref([
	{
		id: 1,
		orderNo: '202310240001',
		status: 'pending',
		createTime: '2023-10-24 10:30:00',
		totalAmount: '37.00',
		products: [
			{
				id: 1,
				name: '经典奶茶',
				spec: '标准糖',
				price: '15.00',
				quantity: 2,
				image: '/static/goods/goods01.jpg'
			},
			{
				id: 2,
				name: '拿铁咖啡',
				spec: '少糖',
				price: '22.00',
				quantity: 1,
				image: '/static/goods/goods02.jpg'
			}
		]
	},
	{
		id: 2,
		orderNo: '202310240002',
		status: 'paid',
		createTime: '2023-10-23 15:20:00',
		totalAmount: '22.00',
		products: [
			{
				id: 2,
				name: '拿铁咖啡',
				spec: '少糖',
				price: '22.00',
				quantity: 1,
				image: '/static/goods/goods03.jpg'
			}
		]
	}
])

// 过滤后的订单
const filteredOrders = computed(() => {
	if (activeTab.value === 'all') {
		return orders.value
	}
	return orders.value.filter(order => order.status === activeTab.value)
})

// 方法
const switchTab = (tabType) => {
	activeTab.value = tabType
}

const getStatusText = (status) => {
	const statusMap = {
		pending: '待付款',
		paid: '待使用',
		received: '待评价',
		completed: '已完成',
		cancelled: '已取消'
	}
	return statusMap[status] || '未知状态'
}

const getStatusClass = (status) => {
	const classMap = {
		pending: 'status-pending',
		paid: 'status-paid',
		received: 'status-received',
		completed: 'status-completed',
		cancelled: 'status-cancelled'
	}
	return classMap[status] || ''
}

const cancelOrder = (orderId) => {
	uni.showModal({
		title: '确认取消',
		content: '确定要取消这个订单吗？',
		success: (res) => {
			if (res.confirm) {
				// 取消订单逻辑
				uni.showToast({
					title: '取消成功',
					icon: 'success'
				})
			}
		}
	})
}

const payOrder = (orderId) => {
	uni.navigateTo({
		url: '/pages_shopcar/submitOrder/index'
	})
}

const confirmReceipt = (orderId) => {
	uni.showModal({
		title: '确认收货',
		content: '请确认已收到商品',
		success: (res) => {
			if (res.confirm) {
				// 确认收货逻辑
				uni.showToast({
					title: '确认成功',
					icon: 'success'
				})
			}
		}
	})
}

const evaluateOrder = (orderId) => {
	uni.navigateTo({
		url: `/pages/evaluate/index?orderId=${orderId}`
	})
}

const reorder = (orderId) => {
	uni.showToast({
		title: '已加入购物车',
		icon: 'success'
	})
}

const navigateToOrder = () => {
	uni.switchTab({
		url: '/pages/order/index'
	})
}

const navigateToProductDetail = (id) => {
		uni.navigateTo({
			url: `/pages_order/orderInfo/index?id=${id}`
		})
	}

onLoad((options) => {
	console.log('我的订单页面加载', options)
	if (options.type) {
		// activeTab.value = options.type
		activeTab.value = 'all'
	}
})
</script>

<style scoped>
.my-order {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 订单标签 */
.order-tabs {
	background: white;
	border-bottom: 1rpx solid #f1f1f1;
}

.tab-list {
	display: flex;
	justify-content: space-around;
}

.tab-item {
	flex: 1;
	padding: 30rpx 0;
	font-size: 28rpx;
	color: #666;
	text-align: center;
	position: relative;
}

.tab-item.active {
	color: #ff6b6b;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 50%;
	height: 4rpx;
	background: #ff6b6b;
	border-radius: 2rpx;
}

.tab-badge {
	position: absolute;
	top: 20rpx;
	right: -10rpx;
	background: #ff4757;
	color: white;
	border-radius: 20rpx;
	min-width: 30rpx;
	height: 30rpx;
	font-size: 20rpx;
	text-align: center;
	line-height: 30rpx;
}

/* 订单列表 */
.order-list {
	height: calc(100vh - 120rpx);
	padding: 20rpx;
}

.order-item {
	background: white;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	margin-right: 40rpx;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.order-no {
	font-size: 26rpx;
	color: #999;
}

.order-status {
	font-size: 26rpx;
	font-weight: bold;
}

.status-pending {
	color: #ff6b6b;
}

.status-paid {
	color: #ffa726;
}

.status-received {
	color: #42a5f5;
}

.status-completed {
	color: #66bb6a;
}

.status-cancelled {
	color: #999;
}

/* 商品信息 */
.order-products {
	padding: 30rpx;
}

.product-item {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.product-item:last-child {
	margin-bottom: 0;
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.product-spec {
	font-size: 24rpx;
	color: #999;
	display: block;
	margin-bottom: 15rpx;
}

.product-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-price {
	font-size: 28rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.product-quantity {
	font-size: 26rpx;
	color: #666;
}

/* 订单底部 */
.order-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-top: 1rpx solid #f5f5f5;
}

.order-time {
	font-size: 24rpx;
	color: #999;
}

.order-total {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

/* 操作按钮 */
.order-actions {
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;
	padding: 0 30rpx 30rpx;
}

.action-btn {
	border: 2rpx solid #ddd;
	background: transparent;
	color: #666;
	border-radius: 30rpx;
	padding: 15rpx 30rpx;
	font-size: 26rpx;
}

.action-btn.primary {
	border-color: #ff6b6b;
	background: #ff6b6b;
	color: white;
}

.action-btn.secondary {
	border-color: #ddd;
	background: transparent;
	color: #666;
}

/* 空状态 */
.empty-order {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 0;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 40rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 40rpx;
}

.empty-btn {
	background: #ff6b6b;
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 20rpx 60rpx;
	font-size: 28rpx;
}
</style>